<template>
    <v-floater class="v-floater-panel" v-model="currentValue" :label="label" :width="width">
        <div v-for="(row, ridx) in settingsFormat" :key="'row_' + ridx">
            <h5 class="folder" >{{ row.label }}</h5>
            <div v-for="(col, cidx) in row.list"  :key="'c' + cidx">
                <v-floater-panel-item
                    :key="ridx + '_' + cidx"
                    :label="col.label"
                    :keys="getKeys(col.key)"
                    v-model="currentSettings[getKeys(col.key, true)]"
                    :format="col"
                    :color="col.color"
                    :slider="col.slider"
                ></v-floater-panel-item>
            </div>
        </div>
    </v-floater>
</template>

<script>
import vFloater from './v-floater.vue';
import vFloaterPanelItem from './v-floater-panel-item.vue';

export default {
    name: 'v-floater-panel',
    components: { vFloater, vFloaterPanelItem },
    props: {
        value: Boolean,
        label: String,
        width: Number,
        settings: Object,
        settingsFormat: Array
    },
    data() {
        return {
            currentValue: this.value,
            currentSettings: this.settings
        };
    },
    computed: {},
    watch: {
        value(val) {
            this.currentValue = val;
        },
        currentValue(val) {
            this.$emit('input', val);
        },
        settings: {
            handler(val) {
                this.currentSettings = val;
            },
            immediate: true,
            deep: true
        },
        currentSettings: {
            handler(val) {
                this.$emit('settingsChanged', val);
            },
            immediate: true,
            deep: true
        }
    },
    created() {},
    beforeDestroy: function () {},

    mounted() {
        this.init();
    },
    methods: {
        init() {
            if (!this.currentValue) return;
            // console.log(`v-floater-panel.${this._uid}.init ... `);
        },
        handleClickBoolean(ridx, cidx) {
            let r = this.settingsFormat[ridx];
            if (!r) return;
            let c = r.list[cidx];
            if (!c) return;
            this.currentSettings[c.key] = !this.currentSettings[c.key];
        },
        handleClickFunc(ridx, cidx) {
            let r = this.settingsFormat[ridx];
            if (!r) return;
            let c = r.list[cidx];
            if (!c) return;
            let func = this.currentSettings[c.key];
            if (func && typeof func === 'function') func();
        },
        getKeys(key, prefix = false) {
            // return key.split('.')[lv];
            let rtn = '',
                s = key.match(/\.(\S*)/);
            if (!s) rtn = key;
            else if (!prefix) rtn = s[1];
            else rtn = key.replace(s[0], '');
            return rtn;
        }
    }
};
</script>

<style lang="scss">
.v-floater-panel {
    cursor: pointer;
    color: #000000;

    .box-tit {
        // margin-left: -5px;
        padding: 0 0 0 10px;
        text-shadow: #888 1px 1px 3px;
    }
    .box-con {
        max-height: 600px;
        overflow: auto;
    }

    p {
        margin: 0;
    }

    .folder {
        // margin-left: -5px;
        background: whitesmoke;
        // margin: 0 0 0 -5px;
        margin: 0;
        padding: 0 0 0 16px;
        font-size: 12px;
        line-height: 36px;
        box-shadow: #ababab 3px 3px 6px;
    }

    .item {
        font-size: 10px;
        line-height: 28px;
        // border-bottom: #f2f2f4 1px dotted;
        display: flex;

        .val {
            margin-left: 6px;
        }
        input {
            flex: 1 1 auto;
            margin: 0 0 0 6px;
            padding: 0 6px;
            font-size: 12px;
            line-height: 1;
            background: transparent;
            border: none;
            border-bottom: #ccc 1px dotted;
        }

        .boolean {
            width: 5px;
            background-color: darkred;

            &.true {
                background: darkgreen;
            }
            &.func {
                background: darkgoldenrod;
            }
            &.obj {
                background: orange;
            }
            &.num {
                background: darkblue;
            }
        }
    }
}
</style>
